<script setup lang="ts">
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'
import { useUserStore } from '@/store/modules/user'


const userStore = useUserStore()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('user-info')

const loginOut = () => {
  userStore.logoutConfirm()
}



</script>

<template>
  <ElDropdown class="custom-hover" :class="prefixCls" trigger="click">
    <div class="flex items-center">

      <i class="iconfont icon-yonghu f-s28"></i>

       <div class="user ml-5px">
        <div class="username">{{ userStore.getUserInfo?.name }}</div>

      </div>
    </div>
    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem>
          <div @click="loginOut">退出系统</div>
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>


</template>

<style scoped lang="less">
.fade-bottom-enter-active,
.fade-bottom-leave-active {
  transition:
    opacity 0.25s,
    transform 0.3s;
}

.fade-bottom-enter-from {
  opacity: 0;
  transform: translateY(-10%);
}

.fade-bottom-leave-to {
  opacity: 0;
  transform: translateY(10%);
}
.userAvatar {
  height: 34px;
  width: 34px;
}
.username {
  font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
  font-weight: 400;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 16px;
}
.roleName {
  font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
  font-weight: 400;
  font-size: 12px;
  color: #aaaaaa;
  line-height: 14px;
}
.userIcon {
  font-size: 8px !important;
  padding-top: 5px;
  height: 100%;
}

</style>
